<template>
  <div class="home">
    <div class="main-homepage">
      <!-- 轮播图 -->
      <section class="lunbotu">
        <div class="my-swiper">
          <!-- 图片容器 -->
          <div class="my-swiper-photo">
            <ul>
              <li><a href="#"><img src="../views/pages/img/f5.webp"></a></li>
              <li><a href="#"><img src="../views/pages/img/yinfengrui3.jpg"></a></li>
              <li><a href="#"><img src="../views/pages/img/f8.webp"></a></li>
              <li><a href="#"><img src="../views/pages/img/f2.webp"></a></li>
              <li><a href="#"><img src="../views/pages/img/f4.webp"></a></li>
              <li><a href="#"><img src="../views/pages/img/f7.webp"></a></li>
              <li><a href="#"><img src="../views/pages/img/f5.webp"></a></li>
            </ul>
          </div>
          <!-- 指示点（导航点） -->
          <ol class="point">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </div>
      </section>
      <!-- 模块 -->
      <section class="module">
        <ul>
          <li class="first">
            <img src="../views/pages/img/bg1.jpg">
            <h3>聊天背景</h3>
          </li>
          <li class="second">
            <img src="../views/pages/img/bg2.jpg">
            <h3>头像</h3>
          </li>
          <li class="third">
            <img src="../views/pages/img/bg3.jpg">
            <h3>表情</h3>
          </li>
          <li class="fourth">
            <img src="../views/pages/img/bg4.jpg">
            <h3>头像挂件</h3>
          </li>
        </ul>
      </section>
      <!-- 热门 -->
      <section class="popular">
        <div class="top-popular">
          <span class="remen">热门专辑</span>
          <span class="more"><router-link to="/home/more/zuixin">更多></router-link></span>
        </div>
        <div class="pic-popular">
          <img src="../views/pages/img/yinfengrui2.jpg">
          <img src="../views/pages/img/z8.webp">
        </div>
      </section>
      <!-- 广告 -->
      <section class="advertisement">
        <h3 class="date">今日广告</h3>
        <div class="box">
          <li><a href="https://www.jd.com/"><img src="../views/pages/img/f13.webp"></a></li>
        </div>
      </section>
      <!-- 精选 -->
      <section class="selected">
        <nav>
          <router-link active-class="active-1" to="/home/recommand">推荐</router-link>
          <router-link active-class="active-1" to="/home/selected">精选</router-link>
          <router-link active-class="active-1" to="/home/new">最新</router-link>
          <router-link active-class="active-1" to="/home/theme">主题</router-link>
          <router-link active-class="active-1" to="/home/head">头像</router-link>
        </nav>
        <!-- 二级路由出口 -->
        <router-view></router-view>
      </section>
    </div>
  </div>
</template>



<style src="../com/assets/css/lunbotu.css"></style>
<style src="../com/assets/css/module.css"></style>
<style src="../com/assets/css/popular.css"></style>
<style src="../com/assets/css/advertisement.css"></style>
<style lang="less" scoped>
@import '../common/less/varible.less';

// scoped 作用域
* {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: @fontfamily;
  // background-color: rgba(248, 219, 222, .4);
}


.home {
  margin-top: -30px;
  height: 2000px;
  width: 100%;
  // background-color: rgba(248, 219, 222, .4);
  color: rgb(0, 0, 0, .6);
}

.lunbotu {
  padding-top: 110px;
  margin-left: 20px;
}

section {
  margin-top: 30px;
}

nav {
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  height: 60px;
  align-items: center;

  a {
    padding: 5px 12px;
    text-align: left;
    font-size: 20px;
  }

  .active-1 {
    color: #239efe;
    border-bottom: 2px solid #239efe;
  }

}
</style>



<script>
import MoreView from '@/views/MoreView.vue';
import ZuixinViewView from '@/views/pages/ZuixinView.vue';
export default {
  components: {
    MoreView,
    ZuixinViewView,
  },
  mounted() {
    function animate(element, option, callback) {
      // 使用定时器之前，先清除定时器
      element.timer && clearInterval(element.timer);
      // 执行定时器函数
      element.timer = setInterval(function () {
        // 定义开关
        var isStop = true;
        // 循环option对象
        for (var property in option) {
          // 获取属性值(目标属性值)
          var value = option[property];
          // 判断属性是否为透明度属性 是就乘以100
          value = property === 'opacity' ? (option[property] * 100) : parseFloat(value);
          // 获取标签属性值（当前属性值）
          var cssObj = getComputedStyle(element);
          var current = cssObj[property];
          current = property === 'opacity' ? (cssObj[property] * 100) : parseFloat(current);
          // 检测透明度属性
          // 透明度单独处理
          // property === 'opacity' && console.log(property);
          // 步长
          // 步长 = (目标位置 - 当前位置) / 数字
          var speed = (value - current) / 10;
          // 结果：
          // 0.111    大于0    向上取整  1
          //  -0.2222  小于0   向下取整  -1
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          // 判断所有属性是否运动到目标值
          if (current != value) {
            // 如果存在一个属性没有达到目标位置 那就不让停止定时器
            isStop = false;
          }
          // 设置标签的目标属性值
          //  透明度是0 ~ 1 之间 
          var propValue = property === 'opacity' ? (current + speed) / 100 : current + speed + "px";
          element.style[property] = propValue;

        }
        // 循环结束，如果布尔值为true，就说明所有属性都达到目标位置
        if (isStop) {
          // 停止指定定时器函数
          clearInterval(element.timer);
          // 检测是否有回调函数
          if (callback && typeof callback == 'function') {
            callback();
          }
        }
      }, 10)
    }

    var my_swiper = document.querySelector(".my-swiper");
    var my_swiper_photo = document.querySelector(".my-swiper-photo");
    var ul = document.querySelector(".my-swiper ul");
    var li = document.querySelectorAll(".point li");
    //2)
    var width = parseFloat(getComputedStyle(my_swiper_photo)['width']);
    var index = 0;
    var key = 0;
    var timer = null;
    var setPoint = function (key) {
      setTimeout(function () {
        for (var i = 0; i < li.length; i++) {
          li[i].className = "";
        }
        li[key].className = "active";
      }, 10)
    }
    //3)
    var autoLeftPlay = function () {
      index++;
      if (index > 6) {
        // ul.style['marginLeft']="0px";
        ul.style.marginLeft = "0px";
        index = 1;
      }
      animate(ul, { marginLeft: -index * width });
      key++;
      key = key > (li.length - 1) ? 0 : key;
      setPoint(key);
    }
    var autoRightPlay = function () {
      index--;
      if (index < 0) {
        ul.style.marginLeft = "-1980px";
        index = 5;
      }
      animate(ul, { marginLeft: -index * width });
      key--;
      key = key < 0 ? (li.length - 1) : key;
      setPoint(key);
    }
    timer = setInterval(autoLeftPlay, 2000);
    //4)
    my_swiper.onmouseover = function () {
      clearInterval(timer);
    }
    my_swiper.onmouseleave = function () {
      clearInterval(timer);
      timer = setInterval(autoLeftPlay, 2000);
    }
    //5)
    for (var i = 0; i < li.length; i++) {
      li[i].xxx = i;
      li[i].onmouseenter = function () {
        index = this.xxx;
        key = this.xxx;
        animate(ul, { marginLeft: -index * width });
        setPoint(key);
      }
    }
    //6)
    document.addEventListener('visibilitychange', function () {
      if (document.hidden) {
        clearInterval(timer);
      } else {
        clearInterval(timer);
        timer = setInterval(autoLeftPlay, 200);
      }
    });
  }
};
</script>